<template>
	<view class="main" :style="{background:`url(${bgImg})`}">
		<view class="myX" :style="{'paddingTop':SystemTop}">
			<u-image width="40rpx" height="40rpx" :src="myX" @click="close"></u-image>
			<view class="Xtitle">团队专属码</view>
		</view>
		<view>
			<view class="center">
				<u-image :src="qrUrl" width="622rpx" height="718rpx" border-radius="20rpx"></u-image>
			</view>
			<view class="bt_list">
				<view class="bt_box">
					<!-- <view class="list_item">
						<view class="">
							<u-image width="120rpx" height="120rpx" :src="wechatIcon" @click="wechat"></u-image>
						</view>
						<view class="m-t-10">
							发送到微信
						</view>
					</view> -->
					<view class="list_item">
						<view class="">
							<u-image width="120rpx" height="120rpx" :src="tuiguang" @click="tui"></u-image>
						</view>
						<view class="m-t-10">
							线下推广码
						</view>
					</view>
					<!-- <view class="list_item">
						<view class="">
							<u-image width="120rpx" height="120rpx" :src="downImg" @click="download"></u-image>
						</view>
						<view class="m-t-10">
							保存到相册
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		PicList,
		getInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				cardId: '',
				qrUrl: '',
				urlBack: '',
				bgImg: '', //"分享专属码背景"
				downImg: '', //分享下载
				tuiguang: '', //"线下推广码"
				wechatIcon: '', //"分享微信"
				SystemTop: '',
				myX: require('@/static/img/myX.png'),
			}
		},
		onReady() {
			this.info()
			//this.Iswechat()
			uni.setNavigationBarTitle({
				title:'团队专属码'
			})
			
		},
		onLoad(obj) {
			this.getList()
			if (obj.cardId) {
				this.cardId = obj.cardId
				this.urlBack = `/pages/intel/details?cardId=${this.cardId}`
			} else {
				this.urlBack = '/pages/intel/details'
			}
			//this.qrUrl = uni.getStorageSync('qrUrl')
		},
		methods: {
			async info() {
				// let info = await getInfo()
				// if (info.code == 200) {
				// 	//console.log(info,'info');
				// 	uni.setStorageSync('userinfo', info)
				// 	uni.setStorageSync('isLogin', true) //已登录
				// 	if (info.user.smartBusineCardResult && info.user.smartBusineCardResult.basicQrCode) {
				// 		this.qrUrl = info.user.smartBusineCardResult.basicQrCode
				// 	}
				// }
				let info = uni.getStorageSync('teamQr')
				if(info && info.basicQrCode){
					this.qrUrl = info.basicQrCode
				}
			},
			tui() { //线下推广码
				//let info = uni.getStorageSync('userinfo')
				// if (info.user.smartBusineCardResult && info.user.smartBusineCardResult.customQrCode) {
				// 	let customQrCode = info.user.smartBusineCardResult.customQrCode
				// 	this.wxDown(customQrCode)
				// } else {
				// 	this.$u.toast('线下推广码为空！！！')
				// }
				let info =  uni.getStorageSync('teamQr')
				if(info && info.customQrCode){
					this.wxDown(info.customQrCode)
				} else {
					this.$u.toast('线下推广码为空！！！')
				}
			},
			download() {
				//this.qrUrl = ''   //图片地址
				this.wxDown(this.qrUrl)
			},
			close() { //点x操作
				uni.switchTab({
					url: '/pages/index/work'
				})
				//console.log(123);
			},
			Iswechat() {
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect().top
				const height = wx.getMenuButtonBoundingClientRect().height
				this.SystemTop = custom + 'px'
				this.height = height + 'px'
			},
			async getList() {
				let res = await PicList()
				res.data.forEach(v => {
					switch (v.imageDesc) {
						case "分享专属码背景":
							this.bgImg = v.imageUrl
							break;
						case "分享下载":
							this.downImg = v.imageUrl
							break;
						case "线下推广码":
							this.tuiguang = v.imageUrl
							break;
						case "分享微信":
							this.wechatIcon = v.imageUrl
							break;
					}
				})
			},
			wxDown(url) {
				const randomName = `image_${this.generateRandomString(10)}.jpg`;
				var element = document.createElement('a');
				element.setAttribute('href', url);
				element.setAttribute('download', randomName);
				element.style.display = 'none';
				document.body.appendChild(element);
				element.click();
				document.body.removeChild(element);
			},
			generateRandomString(length) {
				// 使用示例：‌download("image.jpg", "http://example.com/image.jpg");
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				const charLength = chars.length;
				for (let i = 0; i < length; i++) {
					result += chars.charAt(Math.floor(Math.random() * charLength));
				}
				return result;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.myX {
		//padding-top: 110rpx;
		padding-left: 48rpx;
		padding-top: 10px;
		display: flex;
		//background-color: white;
		padding-bottom: 22rpx;
	
		.Xtitle {
			padding-left: 200rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 38rpx;
		}
	}
	
	.main {
		position: relative;
		height: 100vh;
		width: 100%;
	
		//padding-top: 180rpx;
		//background-color: #F8F8F8;
		.center {
			position: absolute;
			width: 100%;
			margin: 0 auto 0 64rpx;
			// width: 622rpx;
			// height: 718rpx;
			//background: #FFFFFF;
		}
	
		.bt_list {
			position: absolute;
			width: 100%;
			margin-top: 770rpx;
	
			.bt_box {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
	
				.list_item {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}
	}
</style>